<template>
	<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" :mask-click="false">
		<view class="user_andate">
			<view class="title">
				<image class="logo" src="../../../static/logo.png" mode="scaleToFill"></image>
				<text class="">宝娜国际 &nbsp; 申请 </text>

			</view>
			<view class="reminder">
				<text class="">获取你的昵称、头像</text>
				<text v-if="!userInfo.phone">、手机号</text>
			</view>
			<view class="item">
				<text>头像</text>
				<!-- avatar -->
				<view class="flex">
					<button class="more" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" :plain="true"
						type="default">
						<view class="dislpay">
							<image :src="avatarUrl" mode="aspectFit" />
							<text class="iconfont icon-jiantou"></text>
						</view>
					</button>


				</view>
			</view>
			<view class="item">
				<text>昵称</text>
				<!-- avatar -->
				<view class="flex">
					<input type="nickname" v-model="userName" />
				</view>
			</view>
			<view class="item" v-if="!userInfo.phone">
				<text>手机号</text>
				<view class="flex">
					<button class="input_field" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
						<text v-if="phone">{{phone}}</text>
						<text class="stress" v-else>点击获取手机号</text>
					</button>
				</view>
			</view>
			<view class="button_group">
				<button class="butItem" :class="{fillet:isLogin}" type="warn" @click="permission">
					<text v-if="isLogin">立即登录</text>
					<text v-else>允许</text>
				</button>
				<button v-if="!isLogin"  class="butItem revamp" :plain="true" type="default" @click="repulse">
					<text>拒绝</text>
				</button>

			</view>
		</view>
	</uni-popup>

</template>

<script>
	import {
		mapGetters,
	} from 'vuex'
	import {
		updateNameAndAvatar,
		wxappBindingPhone
	} from '@/api/user'
	import {
		getUser
	} from "@/api/store"
	import store from '@/store'
	import {
		VUE_APP_API_URL
	} from '@/config'
	export default {
		props: {
			isLogin: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 用户名
				userName: "",
				// 头像
				avatarUrl: "",
				// 手机号
				phone: ""
			};
		},
		computed: mapGetters(['userInfo']),
		mounted() {
			this.$nextTick(() => {
				this.open();
			})
		},
		methods: {
			open() {
				this.getBasicInfo();
				this.onHideTabBar();
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom');
			},
			// 获取用户中的手机号、头像、昵称
			getBasicInfo() {
				// 头像
				this.avatarUrl = this.userInfo.avatar
				// 昵称
				this.userName = this.userInfo.nickname
				// 手机号
				this.phone = this.userInfo.phone
			},
			//隐藏底部tabBar
			onHideTabBar() {
				uni.hideTabBar()
			},
			//显示底部
			onShowTabBar() {
				uni.showTabBar()
			},
			// 头像信息
			onChooseAvatar(e) {
				const detail = e.detail || {};
				uni.uploadFile({
					url: `${VUE_APP_API_URL}/api/upload`,
					// file: image,
					filePath: detail.avatarUrl,
					header: {
						Authorization: 'Bearer ' + store.getters.token,
					},
					name: 'file',
					success: res => {
						if (res) {
							const data = JSON.parse(res.data)
							this.avatarUrl = data.link;
						}
					},
					fail: err => {
						uni.showToast({
							title: '获取头像失败',
							icon: 'none',
							duration: 2000,
						})
					},
					// complete: res => {
					// 	uni.hideLoading()
					// },
				})
			},
			// 手机
			getPhoneNumber(e) {
				// 判断一下这里是不是小程序 如果是小程序，走获取微信手机号进行绑定
				if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
					uni.showLoading({
						title: '绑定中',
					})
					wxappBindingPhone({
							encryptedData: e.mp.detail.encryptedData,
							iv: e.mp.detail.iv,
						})
						.then(res => {
							uni.hideLoading()
							const data = res.data || {}
							this.phone = data.phone || ""
						})
						.catch(error => {
							const data = error.data || {}
							uni.hideLoading()
							if (data.status != 5101) {
								this.phone = ""
							}
							uni.showToast({
								title: error.msg || error.response.data.msg || error.response.data.message,
								icon: 'none',
								duration: 2000,
							})
						})
				} else {
					this.phone = ""
					uni.showToast({
						title: '已拒绝授权',
						icon: 'none',
						duration: 2000,
					})
				}
			},
			// 允许
			permission() {
				let hint = ""
				if (!this.userName || this.userName == '微信用户') {
					hint = '请修改昵称'
				} else if (!this.phone) {
					hint = '请绑定手机号'
				}
				if (hint) {
					uni.showToast({
						title: hint,
						icon: 'none',
						duration: 2000,
					})
					return
				}
				const option = {
					avatar: this.avatarUrl,
					nickname: this.userName,
					phone: this.phone
				}
				updateNameAndAvatar(option).then(res => {
						if (res.status == 200) {
							this.$store.dispatch('getUser')
							this.getBasicInfo()
							this.close(true);
						}
					})
					.catch(error => {})
			},
			// 拒绝
			repulse() {
				this.close(false)
			},
			// 向父组件通知关闭此页面
			close(refresh = false) {
				this.$refs.popup.close()
				this.onShowTabBar()
				this.$emit('closePage', refresh)
			}
		},
		beforeDestroy() {

		}

	}
</script>

<style lang="less">
	.user_andate {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: white;
		padding: 20rpx;

		.title {
			display: flex;
			align-items: center;

			.logo {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.reminder {
			margin: 20rpx 0;
			font-weight: 700;
		}

		.item {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #F1EEEE;
			padding: 10rpx 0;

			&>text {
				width: 120rpx;
			}

			.flex {
				flex: 1;
				overflow: hidden;
				margin-left: 20rpx;

				image {
					height: 100rpx;
					width: 100rpx;
					overflow: hidden;
					border-radius: 50%;
				}

				input {
					height: 40px;
					width: 100%;
				}

				.stress {
					color: #ED4E55;
				}

				.more {
					border: none;
				}
			}

			.dislpay {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.more {
					width: 100%;
					margin: 0;
					padding: 0;
				}

				.iconfont {
					font-size: 25px;
					font-weight: bold;
				}
			}
		}

		.button_group {
			margin: 50rpx 0;

			.butItem {
				margin: 10px auto;				
			}

			.fillet {
				border-radius: 30rpx;
				width: 90%;
			}

			.revamp {
				border: none;
				color: #B8BAB6;
			}
		}
	}
</style>